<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        .wrap {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            position: relative;
        }

        header {
            height: 44px;
            width: 100%;
            text-align: center;
            background-color: #81a9c3;
            color: #fff;
            line-height: 44px;
            font-size: 20px;
        }

        .flex-1 {
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex:1;
        }

        footer {
            height: 30px;
            width: 100%;
            background-color: #81a9c3;
            color: white;
            line-height: 30px;
            text-align: center;
        }

        .function{
            font-size: 16px;
            padding: 5px 10px;
            border: 1px solid blue;
            border-radius: 3px;
            margin: 5px;
            text-align: center;
            z-index : 9999;
        }

        .live-info{
            display: inline-block;
        }
         
        .live-info .label{
            display: inline-block;
        }

        .live-info input{
            width: 60px;
        }

        .bottom {
            position: absolute;
            bottom: 0;
            z-index: 0;
            /* display: none; */
        }

        .padding-5{
            padding: 0px 5px;
        }

    </style>
</head>

<body class="wrap">
<header>APICloud</header>
<div  class="bottom">
    <div class="padding-5" >
        <div class="live-info">
            <div >
                <div class="label">roomId</div>
                <input  class="input" type="text" id="roomId"    placeholder="请输入roomId" value="1001">
            </div>
            <div >
                <div class="label">userId</div>
                <input  class="input" type="text" id="userId"   placeholder="请输入userId"  value="1002">
            </div>
            <div>
                <div class="label">streamId</div>
                <input  class="input"  type="text"  id="streamId"  placeholder="请输入streamId" value="1001">
            </div>
        </div>
        <div class="live-info">
            <div>
                <div class="label">LinkUserId</div>
                <input  class="input" type="text" id="linkUserId"    placeholder="请输入linkUserId" value="">
            </div>
            <div >
                <div class="label">LinkStreamId</div>
                <input  class="input" type="text" id="linkStreamId"   placeholder="请输入linkStreamId"  value="">
            </div>
            <div style="display: none;" >
                <div class="label">LinkStreamType</div>
                <input  class="input" type="text" id="linkStreamType"   placeholder="请输入linkStreamType"  value="">
            </div>
        </div>
        <div class="live-info" style="display: none;">
            <div>
                <div class="label">LinkUserId2</div>
                <input  class="input" type="text" id="linkUserId2"    placeholder="请输入linkUserId2" value="">
            </div>
            <div >
                <div class="label">LinkStreamId2</div>
                <input  class="input" type="text" id="linkStreamId2"   placeholder="请输入linkStreamId2"  value="">
            </div>
            <div >
                <div class="label">LinkStreamType</div>
                <input  class="input" type="text" id="linkStreamType2"   placeholder="请输入linkStreamType2"  value="">
            </div>
        </div>
    </div>
    <div class="flex-1">
        <div class='function' onclick="startPreview()">预览</div>
        <div class='function' onclick="enterRoom()">进入房间</div>
        <div class='function' onclick="switchCamera()">翻转摄像头</div>
        <div class='function' onclick="stopPreview()">停止预览</div>
        <div class='function' onclick="exitRoom()">退出房间</div>
        <div class='function' onclick="randomUserId()">随机用户ID</div>
        <div class='function' onclick="setAudioRoute0()">扬声器</div>
        <div class='function' onclick="setAudioRoute1()">麦克风</div>
        <div class='function' onclick="restoreView()">恢复</div>
        <div class='function' onclick="showFloatView()">悬浮</div>
        <!-- <div class='function' onclick="closeFra()">关闭</div> -->
        <div class='function' id="setLocalViewBig" onclick="setLocalViewBig()">本地视频小屏</div>
        <div class='function' id="startLink" onclick="startLink()">接受连麦</div>
        <div class='function' id="openMeiYan" onclick="openMeiYan()">打开美颜</div>
    </div>
    <div>

    </div>
</div>
<!-- <iframe src="html/beauty.html" style="z-index:9999" width="100%" height="100%">

</iframe> -->
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/lib/lib-generate-test-usersig.min.js"></script>
<script type="text/javascript" src="../script/lib/md5.js"></script>
<script type="text/javascript" src="../script/lib/jquery-1.8.3.min.js"></script>


<script type="text/javascript">

    let uzModuleMeiHu = null;
    let sdkAppId =  1400801457
    let appSecretKey =  'aeb92d472fc2976c7b6ee0e8f286b72a419d681f22464f363ead735bb55fc3f8'
    let EXPIRETIME = 604800
    let localVideoBig =  0
    let linkText = '接受连麦'
    let linkFlag = false
    let localVideoText = '本地视频小屏'
    let linkUsers = []
    let linkUserId = ''
    let linkStreamId = ''
    let linkUserId2 = ''
    let linkStreamId2 = ''

    function setAudioRoute0(){
        uzModuleMeiHu.setAudioRoute({arg:0})
    }

    function setAudioRoute1(){
        uzModuleMeiHu.setAudioRoute({arg:1})
    }

    function restoreView(){
        uzModuleMeiHu.restoreView()
    }

    function  showFloatView(){

        if(api.systemType == 'android'){
            uzModuleMeiHu.showFloatView({
                floatView:{
                    width:600,
                    height:400,
                    startX :100,
                    startY: 200,
                    deskTopWindow:false,
                    moveAble:true,
                    modality:false
                },
                linkView:{
                    width:120,
                    cellHeight:180,
                    topMargin :5,
                    rightMargin: 5,
                    bottomMargin: 5
                }
            })
        }else if (api.systemType == 'ios'){
            uzModuleMeiHu.showFloatView({
                floatView:{
                    width:300,
                    height:200,
                    startX :100,
                    startY: 200,
                    deskTopWindow:false,
                    moveAble:true,
                    modality:false
                },
                linkView:{
                    width:60,
                    cellHeight:90,
                    topMargin :5,
                    rightMargin: 5,
                    bottomMargin: 5
                }
            })  
        }

        
    }
    

    function onUserVideoAvailable(ret){
        let data  = ret.detail
        if (data.code == '1'){ //连麦
            if(linkUsers.length == 0){
                linkUserId = data.msg
                linkStreamId = data.msg
            }else{
                linkUserId2 = data.msg
                linkStreamId2 = data.msg
            }
            linkUsers.push(data.msg)
        }else{
            linkUsers.splice(linkUsers.indexOf(data.msg), 1)
        }
        $('#linkUserId').val(linkUserId)
        $('#linkStreamId').val(linkStreamId)
        $('#linkUserId2').val(linkUserId2)
        $('#linkStreamId2').val(linkStreamId2)
    }

    function onInitSDK(ret){
        // alert(JSON.stringify(ret))
    }

    function onEventListener(ret, err){
	    let event = ret.detail.event;
        if (event == 'onInitSDK'){
            onInitSDK(ret)
        }else  if(event == 'onUserVideoAvailable'){
            onUserVideoAvailable(ret)
        }
	}

    function randomUserId(){
        let userId = Math.floor((Math.random()*100)+1) + ''
        $('#userId').val(userId)
    }

    function stopPreview(){
        uzModuleMeiHu.stopPreview({});
    }

    function switchCamera(){
        uzModuleMeiHu.switchCamera({});
    }

    function setLocalViewBig(){
        if (localVideoBig == 1){
            localVideoBig  = 0
            localVideoText = '本地视频小屏'
        }else {
            localVideoBig  = 1
            localVideoText = '本地视频大屏'
        }
        $('#setLocalViewBig').text(localVideoText)
    }

    function startLink(){
        linkFlag = !linkFlag
        let linkUserId = $('#linkUserId').val()
        let linkStreamId = $('#linkStreamId').val()
        let playUrl = ''
        if (linkFlag){
            uzModuleMeiHu.startLink({
                linkUserId:linkUserId,
                linkStreamId:linkStreamId,
                playUrl:playUrl,
                localVideoBig:localVideoBig
            })
            linkText = "结束连麦"
         }else{
            uzModuleMeiHu.stopLink({arg:linkUserId})
            linkText = "接受连麦"
        }
        $('#startLink').text(linkText)
    }

    function enterRoom(){
        let userId = $('#userId').val()
        let generator = new LibGenerateTestUserSig(sdkAppId, appSecretKey, EXPIRETIME);
        let userSig = generator.genTestUserSig(userId);

        let roomId = $('#roomId').val()
        let streamId = $('#streamId').val()

        uzModuleMeiHu.enterRoom({
            roomId:roomId,
            userId:userId,
            streamId:streamId,
            userSig:userSig,
            localViewBig:localVideoBig
        })
    }

    function exitRoom(){
        uzModuleMeiHu.exitRoom({})
    }


    function startPreview(){
        // alert('startPreview')
        uzModuleMeiHu.startPreview({"config":{"orientation":1,"resolution":18,"renderMirror":1,"encoderMirror":1,"resolutionMode":2,"videoFps":20,"videoBitrate":1200},"frontCamera":1});
    }

    function initSDK(){
        uzModuleMeiHu  = api.require('moduleMeiHu');
        // alert(JSON.stringify(uzModuleMeiHu))
        uzModuleMeiHu.setEventListener({},onEventListener)
        uzModuleMeiHu.initAttribute({"androidConfig":{"linkConfig":{"subView":{"width":240,"cellHeight":360,"topMargin":20,"rightMargin":20,"bottomMargin":20,"itemMargin":20,"position":"top"},"mixConfig":{"videoWidth":360,"videoHeight":640,"videoBitrate":900},"mainStream":{"x":0,"y":0,"width":360,"height":640},"subStream":{"width":120,"height":180,"rightMargin":20,"bottomMargin":20}},"pkConfig":{"mainView":{"x":20,"y":50,"width":340,"height":600},"subView":{"x":380,"y":50,"width":340,"height":600},"mixConfig":{"videoWidth":400,"videoHeight":300,"videoBitrate":900},"mainStream":{"x":20,"y":50,"width":170,"height":300},"subStream":{"x":210,"y":50,"width":170,"height":300}}},"iosConfig":{"linkConfig":{"subView":{"width":120,"cellHeight":180,"topMargin":20,"rightMargin":20,"bottomMargin":20,"itemMargin":20,"position":"top"},"mixConfig":{"videoWidth":360,"videoHeight":640,"videoBitrate":900},"mainStream":{"x":0,"y":0,"width":360,"height":640},"subStream":{"width":120,"height":180,"rightMargin":20,"bottomMargin":20}},"pkConfig":{"mainView":{"x":20,"y":50,"width":170,"height":300},"subView":{"x":210,"y":50,"width":170,"height":300},"mixConfig":{"videoWidth":720,"videoHeight":1280,"videoBitrate":900},"mainStream":{"x":20,"y":50,"width":330,"height":580},"subStream":{"x":370,"y":50,"width":330,"height":580}}}});
        uzModuleMeiHu.initData();
        uzModuleMeiHu.initSDK();
        uzModuleMeiHu.addView();
    }

    function genTestUserSig(userId) {
        let  generator = new LibGenerateTestUserSig(sdkAppId, appSecretKey, EXPIRETIME)
        let  userSig = generator.genTestUserSig(userId)
        return userSig
    }



    apiready = function() {

        // let moduleDemo  = api.require('moduleMeiHu')
        // alert(moduleDemo)
        // return

        let header = $api.dom('header'); // 获取 header 标签元素
        let footer = $api.dom('footer'); // 获取 footer 标签元素

        // 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
        // 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
        // 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
        let headerH = $api.fixStatusBar(header);
        // 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
        let footerH = $api.fixTabBar(footer);

        api.openFrame({
            name: 'mhsdk',
            url: './main.html',
            bounces: false,
            rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
                marginTop: headerH  , // main页面距离win顶部的高度
                marginBottom: footerH + 300, // main页面距离win底部的高度
                // x:0,
                // y:0,
                w: 'auto', // main页面的宽度 自适应屏幕宽度
                // h:'auto'
            },
            // bgColor:'rgba(0,0,0,0)'
            // vScrollBarEnabled: true,
            // hScrollBarEnabled: true
        })

        initSDK()
        // randomUserId()

        let cameraPermission = 'camera'
        let microphonePermission = 'microphone'
        let permissions = [cameraPermission,microphonePermission]
        let resultList = api.hasPermission({
            list: permissions
        });
        if(resultList[0].granted && resultList[1].granted){
            startPreview()
            //enterRoom()
        } else{
            api.requestPermission({
                list: permissions,
            }, function(res) {
                if (res.list[0].granted && res.list[1].granted) {
                    startPreview()
                    //enterRoom()
                }
            });
        }
        
        // api.requestPermission({
        //         list: permissions,
        //     }, function(res) {
        //         if (res.list[0].granted && res.list[1].granted) {
        //             startPreview()
        //             enterRoom()
        //         }
        //     });

        //输出Log，Log将显示在APICloud Studio控制台
        console.log("Hello World! Hello APICloud!");
 
    };

</script>

</html>
